{% extends "base.html" %}

{% block sidenav %}
<div id="transaction_form">
    <form action="query" method="get">
        <fieldset>
            <legend>Transaction Form</legend>
            <p>
            <label for="account_name">Account:</label>
            <input id="account_name" name="account_name" />
            </p>
            <p>
            <label for="description">Description:</label>
            <input id="description" name="description" maxlength="100" />
            </p>
            <p>
            <label for='min_amount'>min amount:</label>
            <input id='min_amount' name='min_amount'>
            <label for='max_amount'>max amount:</label>
            <input id='max_amount' name='max_amount'>
            </p>
            <p>
            <label for="is_income">flow:</label>
            <input type=radio id="all" class="is_income" name="is_income" checked value="all">
            <label for="all">all</label>
            <input type=radio id="in" class="is_income" name="is_income" value="in">
            <label for="in">in</label>
            <input type=radio id="out" class="is_income" name="is_income" value="out">
            <label for="out">out</label>
            </p>
            <p>
            <label for="tag">Tag:</label>
            <input id="tag" name="tag" maxlength="100" />
            </p>
            <p>
            <label for='min_date'>min date:</label>
            <input id='min_date' name='min_date'>
            <label for='max_date'>max date:</label>
            <input id='max_date' name='max_date'>
            </p>
            <p>
            <input id="btn_commit" type="submit" />
            </p>
        </fieldset>
    </form>
</div>
{% endblock %}

{% block content %}
<div id="account_transaction_list" class="transaction_list">
    <table cellspacing="0">
        <caption>Transaction List</caption>
        <colgroup>
            <col id="account_col" />
            <col id="description_col" />
            <col id="amount_col" />
            <col id="is_income_col" />
            <col id="tag_col" />
            <col id="trasnaction_date_col" />
        </colgroup>
        <thead>
            <tr>
                <th scope="col">Account</th>
                <th scope="col">Description</th>
                <th scope="col">Amount</th>
                <th scope="col">Is income?</th>
                <th scope="col">Tag</th>
                <th scope="col">Transaction Date</th>
            </tr>
        </thead>
        <tbody class='list'>
            <tr><td colspan="6">Click <em>Query</em></td></tr>
        </tbody>
        <tbody class='margin'>
            <tr><td colspan="6"></td></tr>
        </tbody>
        <tfoot>
            <tr>
                <th align="left" colspan="6">Status</th>
            </tr>
        </tfoot>
    </table>
</div>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="/js/json.js"></script>
<script type="text/javascript" src="/js/report.js"></script>
{% endblock %}
